import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { Message,Loading } from 'element-ui'
let loadingInstance  //** 全局定义 加塞样式 */
// 1. 创建 axios 实例
const service = axios.create({
  // 配置后台请求的基础路径
  baseURL: 'https://api-hmzs.itheima.net/api',
  // 请求超时时间
  timeout: 5000 // request timeout
})

//  2. 添加拦截器
// 请求拦截器：在发送请求之前做些什么
service.interceptors.request.use(
  config => {
    /* // **  Loading 加载 */
    loadingInstance = Loading.service({
      text:'拼命加塞中...',
      background:'rgba(0,0,0,.7)'
    })
    // 场景 1：统一设置token 到请求头
    // 1. 获取token
    const token = store.state.user.token
    // 2. 判断是否存在token，如果存在统一设置token
    if (token) {
      // Authorization后台定义的
      config.headers.Authorization = token
    }
    return config
  },
  error => {
    console.log(error);
    return Promise.reject(error)
  }
)

// 响应拦截器：请求成功或失败执行
service.interceptors.response.use(
  response => {
    // 场景 2：统一处理响应结果（简化数据返回）
    loadingInstance.close()  //** 关闭 加塞样式 */
    return response.data
  },
  error => {
    // 场景 3：处理 401 情况
    if(error.response.status === 401){
      /* token  失效 跳转到 登录页 */
      /* 删除 state 中的数据  和本地仓库的数据  */
      loadingInstance.close()  //** 关闭 加塞样式 */
      store.commit('user/delToken')
      router.push('/login')
    }
    Message.error(error.response.data.msg)
    console.dir(error);
    return Promise.reject(error)
  }
)
//  3. 导出 service
export default service